<template>
  <el-form
    ref="form"
    class="TDrawerForm"
    :model="innerValue"
    v-bind="$attrs"
    :disabled="disabled"
    :class="`${disabled ? 'disabledForm' : ''}`"
    v-on="$listeners"
  >
    <el-descriptions :column="column" border v-bind="$attrs">
      <el-descriptions-item
        v-for="column in columns"
        :key="column.prop"
        :span="column.span"
        labelClassName="!bg-[#fafbfc] !text-[#515A6E]/70"
      >
        <template slot="label">
          <div class="mr-[16px] text-right">
            <span v-if="column.required && !['detail'].includes(type)" class="isDot"></span>{{ column.label }}
          </div>
        </template>
        <el-form-item :key="column.domKey" :label-width="column.labelWidth" :prop="column.required ? column.prop : ''">
          <template
            v-if="
              type == 'detail' &&
              column.prop &&
              (innerValue[column.prop] === '' ||
                innerValue[column.prop] === null ||
                innerValue[column.prop] === undefined)
            "
          >
            <el-input class="empty-dialog-text">
              <template slot="prepend">-</template>
            </el-input>
          </template>
          <template
            v-else-if="
              type == 'detail' &&
              column.slotName &&
              (innerValue[column.slotName] === '' ||
                innerValue[column.slotName] === null ||
                innerValue[column.slotName] === undefined)
            "
          >
            <el-input class="empty-dialog-text">
              <template slot="prepend">-</template>
            </el-input>
          </template>
          <template v-else>
            <slot v-if="column.type == 'slot'" :name="column.slotName"></slot>
            <el-tooltip
              v-if="column.showOverflowTooltipField && type == 'detail'"
              :content="innerValue[column.prop]"
              placement="top"
            >
              <el-input
                v-if="type == 'detail'"
                v-model="innerValue[column.prop]"
                type="text"
                clearable
                class="input-tooltip"
                :rows="column.rows"
                :disabled="column.disabled"
                :placeholder="column.placeholder"
                :maxlength="column.maxlength"
                :minlength="column.minlength"
              ></el-input>
            </el-tooltip>
            <el-input
              v-if="
                (type != 'detail' || (type == 'detail' && !column.showOverflowTooltipField)) && column.type == 'text'
              "
              v-model="innerValue[column.prop]"
              type="text"
              clearable
              :rows="column.rows"
              :disabled="column.disabled"
              :placeholder="column.placeholder"
              :maxlength="column.maxlength"
              :minlength="column.minlength"
            ></el-input>
            <el-input
              v-if="column.type == 'textarea'"
              v-model="innerValue[column.prop]"
              type="textarea"
              clearable
              :rows="column.rows"
              :disabled="column.disabled"
              :placeholder="column.placeholder"
              :maxlength="column.maxlength || 255"
              :show-word-limit="column.maxlength ? true : false"
              :autosize="column.disabled || disabled ? true : false"
            />
            <el-input
              v-if="
                (type != 'detail' || (type == 'detail' && !column.showOverflowTooltipField)) && column.type == 'input'
              "
              v-model="innerValue[column.prop]"
              type="input"
              clearable
              :placeholder="column.placeholder"
              :disabled="column.disabled"
              :maxlength="column.maxlength"
              :minlength="column.minlength"
              @input="inputChange(column.prop, column.validator)"
            >
              <template v-if="column.appendText" slot="append">{{ column.appendText }}</template>
            </el-input>
            <el-input-number
              v-if="column.type == 'TinputNumber'"
              v-model="innerValue[column.prop]"
              :controls="column.controls"
              :placeholder="column.placeholder"
              :precision="column.precision"
              :min="column.min"
              :max="column.max"
            ></el-input-number>
            <el-radio-group
              v-if="column.type == 'radio'"
              v-model="innerValue[column.prop]"
              :placeholder="column.placeholder"
              class="w-full"
              :disabled="column.disabled"
            >
              <template v-if="column.key">
                <el-radio
                  v-for="item in $store.state.data.OPTION_MAP[column.key]"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </template>
              <template v-if="column.options && !column.dataProp">
                <el-radio v-for="item in column.options" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </template>
              <template v-if="column.options && column.dataProp">
                <el-radio
                  v-for="item in column.options"
                  :key="item[column.dataProp.value]"
                  :label="item[column.dataProp.value]"
                >
                  {{ item[column.dataProp.label] }}
                </el-radio>
              </template>
            </el-radio-group>
            <el-cascader
              v-if="column.type == 'cascader'"
              v-model="innerValue[column.prop]"
              :disabled="column.disabled"
              :options="column.options"
              :props="{
                expandTrigger: 'hover',
                value: 'id',
                label: column.show,
                multiple: column.multiple,
                checkStrictly: column.checkStrictly,
              }"
              :show-all-levels="column.showAllLevels"
              :clearable="column.clearable"
              :placeholder="column.placeholder"
              class="w-full"
              popper-class="queryCascaderBox"
            >
              <template slot-scope="{ data }">
                <span :title="data[column.show]">{{ data[column.show] }}</span>
              </template>
            </el-cascader>
            <el-select
              v-if="column.type == 'select'"
              v-model="innerValue[column.prop]"
              :placeholder="column.placeholder"
              class="w-full"
              :class="column.myClass"
              :disabled="column.disabled"
              clearable
              :filterable="column.filterable"
              :allow-create="column.allowCreate"
              :default-first-option="column.defaultFirstOption"
              :multiple="column.multiple"
            >
              <template v-if="column.key">
                <el-option
                  v-for="item in $store.state.data.OPTION_MAP[column.key]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </template>
              <template v-if="column.options && !column.dataProp">
                <el-option v-for="item in column.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </template>
              <template v-if="column.options && column.dataProp">
                <el-option
                  v-for="item in column.options"
                  :key="item[column.dataProp.value]"
                  :label="item[column.dataProp.label]"
                  :value="item[column.dataProp.value]"
                >
                </el-option>
              </template>
            </el-select>
            <el-select
              v-if="column.type == 'selectUnit'"
              v-model="innerValue[column.prop]"
              :placeholder="column.placeholder"
              class="units"
              :disabled="column.disabled"
            >
              <template v-if="column.key">
                <el-option
                  v-for="item in $store.state.data.OPTION_MAP[column.key]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </template>
              <template v-if="column.options && !column.dataProp">
                <el-option v-for="item in column.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </template>
              <template v-if="column.options && column.dataProp">
                <el-option
                  v-for="item in column.options"
                  :key="item[column.dataProp.value]"
                  :label="item[column.dataProp.label]"
                  :value="item[column.dataProp.value]"
                >
                </el-option>
              </template>
            </el-select>
            <el-date-picker v-if="column.type == 'EDatePicker'" v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
            <TDatePicker
              v-if="column.type == 'TDatePicker'"
              v-model="innerValue[column.prop]"
              :placeholder="column.placeholder"
              :format="column.format"
              :valueFormat="column.valueFormat ? column.valueFormat : column.format"
              :disabled="column.disabled || disabled"
              size="large"
            />
            <div v-if="column.type == 'signalUpload'">
              <el-upload
                class="mb-[15px]"
                :action="actionUrl"
                :headers="{ Authorization: `Bearer ${$store.state.user.token}` }"
                :data="{ bizType: column.bizType }"
                :on-success="handleSignalFileSuccess"
                :before-upload="beforeSignalFileUpload"
                :multiple="column.multiple"
                :show-file-list="column.showList"
              >
                <slot name="btn">
                  <t-button className="uploadClass" svgIcon="ic-upload">点击上传</t-button>
                </slot>
              </el-upload>
              <div
                v-for="(item, index) in fileList"
                :key="index"
                class="mb-[5px] flex items-center justify-between bg-[#fafbfc] px-[5px]"
              >
                <span
                  v-if="item && (item.attUrl || item.fileUrl)"
                  class="el-icon-success mr-[4px] text-[#078d5c]"
                ></span>
                <span v-if="item && (item.attUrl || item.fileUrl)" class="mr-[4px] h-[8px] w-[1px] bg-[#E8EAEF]"></span>
                <img :src="require(`@/assets/images/${getIconByFile(item?.originalName || item.filename)}.svg`)" />
                <div class="ml-[8px] flex-1 leading-[24px]">{{ item.originalName }}</div>
                <div class="flex">
                  <SvgIcon
                    name="file_download"
                    class="mr-[8px] cursor-pointer text-[16px]"
                    @click="toExportBlob(item)"
                  />
                  <SvgIcon
                    v-if="type !== 'detail'"
                    name="file_delete"
                    class="mr-[8px] cursor-pointer text-[16px]"
                    @click="handleRemove(item)"
                  />
                </div>
              </div>
              <p v-if="column.placeholder" class="text-[12px] text-[#7E8A9D]">{{ column.placeholder }}</p>
            </div>
            <div v-if="column.type == 'FileUploadBtn'">
              <FileUploadBtn
                v-model="innerValue[column.prop]"
                :placeholder="column.placeholder"
                :disabled="column.disabled || disabled"
              />
            </div>
            <div v-if="column.type == 'TMultipleUpload'">
              <TMultipleUpload />
            </div>
            <WangEditor
              v-if="column.type == 'editor'"
              ref="wangDom"
              v-model="innerValue[column.prop]"
              :disabled="column.disabled || disabled"
            />
          </template>
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
  </el-form>
</template>

<script>
import vModelMixin from "@/mixin/v-model";
import fileIcon from "@/mixin/fileIcon";
import { FILE_UPLOAD_URL } from "@/config/api-constant";
import exportBlob from "@/util/exportBlob";
import { systemDeleteFile } from "@/api/file";
export default {
  name: "TDrawerForm",
  mixins: [vModelMixin, fileIcon],
  props: {
    columns: {
      type: Array,
      require: true,
      default: () => [],
    },
    type: {
      type: String,
      require: false,
      default: "detail",
    },
    record: {
      type: Object,
      require: false,
      default: () => {},
    },
    column: {
      type: [String, Number],
      require: false,
      default: 3,
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  computed: {
    disabled() {
      return this.type == "detail" ? true : false;
    },
    actionUrl() {
      return process.env.VUE_APP_API_ROOT + FILE_UPLOAD_URL;
    },
  },
  watch: {
    innerValue: {
      handler(newVal) {
        this.fileList = newVal.attachments || newVal.attachmentList || [];
      },
      immediate: true,
    },
    fileList: {
      handler(value) {
        console.log(value);
        this.innerValue.attachIdList = value.map((item) => item.id);
        console.log(this.innerValue);
      },
      immediate: true,
    },
  },
  methods: {
    //单个文件上传处理
    beforeSignalFileUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        this.$message.error("上传文件大小不能超过 50MB!");
      }
      return isLt50M;
    },
    //单个上传文件处理
    handleSignalFileSuccess(res, file) {
      this.fileList = this.fileList.concat(res.data);
      this.$message.success("上传成功");
    },
    toExportBlob(value) {
      exportBlob({ params: { id: value.id } });
    },
    async handleRemove(value) {
      try {
        await this.$confirm("是否确定删除数据?", "操作确认", {
          confirmButtonText: "确 定",
          cancelButtonText: "取 消",
          type: "warning",
        });
        await systemDeleteFile({ id: value.id });
        this.fileList = this.fileList.filter((row) => {
          return row.id !== value.id;
        });
        this.$message.success("删除成功");
      } catch {
        this.$message.warning("已取消删除");
      }
    },
    inputChange(val, validator) {
      validator && validator(this.innerValue, val);
    },
  },
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  line-height: 178px;
  color: #8c939d;
  text-align: center;
}

.avatar {
  display: block;
  width: 178px;
  height: 178px;
}
</style>

<style lang="scss" scoped>
::v-deep .el-form-item__content:has(> .units) {
  margin-top: 1px;
  margin-left: -16px !important;
}

::v-deep .el-select__tags {
  .el-select__input {
    background: transparent;

    &:focus {
      box-shadow: none;
    }
  }
}

::v-deep .my-select-input {
  .el-icon-arrow-up {
    display: none;
  }
}
</style>
